<template>
  <div>
    <ElCard shadow="never" header="首页">
      {{ new Date().getTime() }}
      <ElRow>
        <el-button v-if="$checkAuth('SystemAdd')">Add</el-button>
        <el-button type="primary" v-if="$checkAuth('SystemDel')">Del</el-button>
        <el-button type="success" v-if="$checkAuth('SystemEdit')"
          >Edit</el-button
        >
        <el-button type="info" v-if="$checkAuth('SystemDetail')"
          >Detail</el-button
        >
      </ElRow>
    </ElCard>
    <el-form ref="formRef"></el-form>
    <Test :name />
    <DeleteButton v-model:selectedKeys="selectedKeys" />
    <p>{{ str }}</p>
  </div>
</template>

<script setup lang="ts">
import { ElForm } from 'element-plus'

import { computed, ref } from 'vue'
import Test from './components/Test.vue'

import { copyTxt } from './copy'

const selectedKeys = ref([1, 2, 4])

const name = '这是name参数值'
const str = computed(() => {
  const a =
    '在前端处理长文本且需要在中间显示省略号,两端保留完整文本的情况，通常有下面几种方法可以达到效果'
  return a.substring(0, 9) + '...' + a.substr(-2)
})

const formRef = ref<InstanceType<typeof ElForm>>()
document.addEventListener('copy', (e: any) => {
  if (e.target) {
    copyTxt(e.target.innerHTML)
  }
})
</script>

<style scoped></style>
